import React from 'react'
import {withRouter,} from 'react-router-dom'
import {connect,} from 'react-redux'
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import CommentItem from "../topic-detail/CommentItem/CommentItem";
import LocalStorageService from "../../utils/LocalStorageService";
import {Toast} from "antd-mobile";

class CommentDetail extends React.Component {

    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.index = this.props.location.state.index
        // this.comment = this.props.location.state.comment
        this.topicId = Number(this.props.match.params.topicId)
        this.commentId = Number(this.props.match.params.commentId)
        this.storage = LocalStorageService
        this.state = {
            comment: this.props.location.state.comment,
            p: 0,
            txt: '',
        }
    }

    componentDidMount() {
        // this.addCommentDetail()
        this.getTopicComment()
        this.getCommentComment()
    }

    componentDidUpdate(prevProps, prevState, snapshot) {

        const comment = this.state.comment
        const topicComments = this.props.topic.topicDetail.comments
        const topicPage = comment.p
        const topicComment = topicComments[topicPage]
        if (topicComment) {
            let commentRedux = topicComment[this.index % 10]
            if (comment && commentRedux && JSON.stringify(comment) !== JSON.stringify(commentRedux)) {
                commentRedux.p = comment.p
                this.setState({
                    comment: commentRedux,
                })
            }
        }

        const comments = this.state.comment.comments
        const reduxComments = this.props.topic.commentDetail.comments
        if (JSON.stringify(comments) !== JSON.stringify(reduxComments)) {
            let comment = this.state.comment
            comment.comments = reduxComments
            this.setState({
                comment,
            })
        }
    }


    componentWillUnmount() {
        this.emptyComment()
    }

    addCommentDetail() {
        const comment = this.comment
        this.props.doAddCommentDetailLevel2({detail: comment,})
    }

    onChange = (e, type) => {
        const v = e.target.value
        this.setState({
            [type]: v,
        })
    }

    empty = () => {
        this.setState({
            txt: '',
        })
    }

    emptyComment = () => {
        this.props.doEmptyCommentDetail()
    }


    getUser = () => {
        const uid = LocalStorageService.get('userid')
        const userDetail = this.props.user.userdetail
        const login = LocalStorageService.get('isLogin')
        const flag = userDetail.initFlag
        if (flag === 0 && login) {
            this.props.fetchUserDetail({uid,})
        }
    }

    getTopicComment = () => {
        const p = Number(this.state.comment.p)
        const cid = 1
        const huatiid = this.topicId
        const uid = this.uid
        const pushState = this.props.location.state
        const params = {p, cid, huatiid, uid,}
        if (pushState.lzuid) {
            params.lzuid = pushState.lzuid
        }
        this.props.doGetComment(params)
    }

    getCommentComment = () => {
        const p = this.state.p
        const cid = 2
        const commentid = this.commentId
        // this.props.doGetComment({p, cid, commentid,})
        this.props.doGetCommentLevel2({p, cid, commentid, level: 2})
    }

    addZan = (params) => {
        this.props.doAddZan(params)
    }

    addComment = () => {
        const p = 0
        const cid = 2
        const commentid = this.commentId
        this.props.doAddCommentLevel2({p, cid, commentid,})
    }

    report = () => {
        const uid = this.uid
        const huatiid = this.topicId
        const commentid = this.commentId
        this.props.doReportComment({uid, huatiid, commentid,})
    }

    doComment = () => {
        const params = {
            uid: this.uid,
            huatiid: this.topicId,
            commentid: this.commentId,
            txt: this.state.txt,
            zan: 0,
            huatiuid: this.state.comment.Uid,
        }
        const resp = this.props.doComment(params)
        resp.then(resp => {
            const data = resp.data
            if (data.ok) {
                this.getTopicComment()
                this.getCommentComment()
                this.empty()
            }
        })
    }

    zan = () => {
        const did = this.state.comment.Zan > 0
        if (did > 0) {
            Toast.info('你已经赞过啦')
            return
        }
        const params = {
            uid: this.uid,
            huatiid: this.topicId,
            commentid: this.commentId,
            txt: '',
            zan: 1,
        }
        this.props.doComment(params)
            .then((resp) => {
                if (resp.data.ok) {
                    this.getTopicComment()
                }
            })
    }

    reply = () => {

    }

    render() {

        const history = this.props.history
        const title = `${this.index + 1}楼评论`
        const comment = this.state.comment

        const input = <div className='topic-detail-bottom-input'>
            <input
                value={this.state.txt}
                onChange={(e) => this.onChange(e, 'txt')}
            />
            <div onClick={this.doComment}>评论</div>
        </div>

        return <GoBackLayout
            title={title}
            history={history}
        >
            <div style={{marginBottom: '50px',}}>
                <CommentItem
                    comment={comment}
                    end={comment.comments ? comment.comments.end : true}
                    level={2}
                    onZan={this.zan}
                    onReport={this.report}
                />
            </div>
            {input}
        </GoBackLayout>
    }
}

const mapState = state => ({
    topic: state.topic,
    user: state.user,
})

const mapDispatch = dispatch => ({
    doGetComment: (payload) => dispatch.topic.doGetComment(payload),
    doGetTopicDetail: (payload) => dispatch.topic.doGetTopicDetail(payload),
    doGetCommentLevel2: (payload) => dispatch.topic.doGetCommentLevel2(payload),
    doComment: (payload) => dispatch.topic.doComment(payload),
    doZanComment: (payload) => dispatch.topic.doZanComment(payload),
    fetchUserDetail: (payload) => dispatch.user.fetchUserDetail(payload),
    doAddCommentLevel2: (payload) => dispatch.topic.doAddCommentLevel2(payload),
    doAddCommentDetailLevel2: (payload) => dispatch.topic.doAddCommentDetailLevel2(payload),
    doEmptyCommentDetail: (payload) => dispatch.topic.doEmptyCommentDetail(payload),
    doAddZan: (payload) => dispatch.topic.doAddZan(payload),
    doReportComment: (payload) => dispatch.topic.doReportComment(payload),
})

export default connect(mapState, mapDispatch)(withRouter(CommentDetail))
